<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html5语义化标签布局兼容性调整</title>
	<style>
	header, section, footer, aside, nav, main, article, figure {
    display: block; 
}
		body{margin: 0px;
		padding : 0px;
		text-align:center;}
		
		header{height: 200px;
			background-color: white;}
		article{height: 500px;
				background-color: #eee;
				}
		aside{width: 30%;height: 500px;background-color: green;float:left;}
		section{width: 60%;height: 500px;background-color:red;float: right;}
		footer{height: 200px;
			background-color: #000;}
			address{font-style:normal;}
	</style>
	<!-- 这里的代码只有在IE6-8才能执行，css将标签转换为块级元素display:block。用js生成标签 -->
	<!--[if lte IE 8]>
	<script>
	document.createElement("header");
	document.createElement("footer");
	document.createElement("section");
	document.createElement("aside");
	document.createElement("article");
	document.createElement("nav");
	document.createElement("adress");
	</script>
	<![endif]-->
<!-- Bootstarp插件可以直接兼容IE以下的插件 -->
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<!--头部  -->
	<header>头部</header>
	<!-- 主体内容区宇 -->
	<article>
		<!-- 左侧 -->
		<aside>左侧</aside>
		<!-- 右侧 -->
		<section>右侧</section>
	</article>
	<!-- 版权 --> 
	<footer>
		<address>版权所有</address>
	</footer>



</body>
</html>